<template>
    <div 
      class="group relative bg-white rounded-xl shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1 cursor-pointer"
    >
      <!-- 产品图片 -->
      <div class="aspect-w-16 aspect-h-9 bg-gray-100 overflow-hidden">
        <img 
          :src="product.image || '/placeholder-product.jpg'"
          :alt="product.name"
          class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105"
        >
        <!-- 标签 -->
        <span 
          v-if="product.tag"
          class="absolute top-2 right-2 px-2 py-1 text-xs font-semibold rounded-full"
          :class="{
            'bg-red-100 text-red-800': product.tag === '新品',
            'bg-blue-100 text-blue-800': product.tag === '热销',
            'bg-green-100 text-green-800': product.tag === '促销'
          }"
        >
          {{ product.tag }}
        </span>
      </div>
  
      <!-- 产品信息 -->
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 line-clamp-1">{{ product.name }}</h3>
        <p class="mt-1 text-sm text-gray-500 line-clamp-2">{{ product.description }}</p>
        
        <div class="mt-3 flex items-center justify-between">
          <span class="text-lg font-bold text-primary-600">¥{{ product.price }}</span>
          <UButton 
            size="xs"
            color="primary"
            variant="outline"
            label="查看详情"
          />
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  defineProps<{
    product: {
      id: number
      slug: string
      name: string
      description: string
      price: number
      image?: string
      category: string
      tag?: string
    }
  }>()
  </script>